// import 'css-loader!../css/index.css'; //內联的使用方法
import '../css/index.css';
//错误信息告诉我们需要一个loader来加载这个css文件，
//loader可以用于对模块的源代码进行转换
//将css文件看作是一个模块，通过import来加载这个模块的
//但是在加载过程中，webpack其实不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能
//我们需要一个读取css文件的loader，这个loader最常用的就是css-loader

import '../css/component.less';

function component() {
  const element = document.createElement('div');

  element.innerHTML = ['Hello', 'Webpack'].join(' ');

  element.className = 'content';

  //创建一个img元素，设置src元素
  const imgEl = new Image();
  imgEl.src = require('../img/01.jpeg').default;
  element.appendChild(imgEl);

  //创建一个div，设置背景图片
  const bgDivEl = document.createElement('div');
  bgDivEl.style.width = 200 + 'px';
  bgDivEl.style.height = 200 + 'px';
  bgDivEl.className = 'bg-image';
  bgDivEl.style.backgroundColor = 'red';
  element.appendChild(bgDivEl);

  return element;
}

document.body.appendChild(component());
